<template>
	<div class="department">
		<div class="department-head">
			<span style="font-size: 30px;font-weight: bold;">
				{{department.name}}
			</span>
			<span style="margin-left: 10px;">
				{{department.managerName}}
			</span>
		</div>
		<div style=" width: 100%;display: flex;justify-content: space-between;">
			<div>
				<el-button type="primary" plain @click="back">返回</el-button>
				<el-button type="primary" plain @click="add">添加人员</el-button>
				<el-button type="danger" plain @click="remove">移除人员</el-button>
			</div>
			<!-- 条件查询 -->
			<div>
				<el-input v-model="nickName" placeholder="按手机号或姓名搜索" clearable
					@change="onSubmit" @clear="reset">
				</el-input>
			</div>
		</div>
		<div class="department-table">
			<el-table :data="tableData" v-loading="loading" border stripe style="width: 100%" max-height="550"
				@selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55" :selectable="selectable"></el-table-column>
				<el-table-column prop="nickName" label="姓名" fit></el-table-column>
				<el-table-column prop="name" label="所在部门" fit></el-table-column>
				<el-table-column prop="roleName" label="角色" fit></el-table-column>
				<el-table-column label="操作" width="150" fixed="right">
					<template slot-scope="scope">
						<div style="display: flex">
							<el-button @click="deleteGoods(scope.row)" type="text" size="mini">
								移除
							</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="currentPage" :page-sizes="[20, 50, 100]" :page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
		<!-- 添加人员 -->
		<el-dialog style="margin-top:0" :visible.sync="addShow" width="70%" title="添加人员" @close="closeDialog">
			<div style=" width: 100%;display: flex;justify-content: flex-end;">
				<!-- 条件查询 -->
				<div>
					<el-input v-model="nickName" placeholder="按手机号或姓名搜索" clearable
						@change="submitUser" @clear="resetUser">
					</el-input>
				</div>
			</div>
			<div class="department-table">
				<el-table :data="userTableData" v-loading="userLoading" border stripe style="width: 100%"
					max-height="300" @selection-change="userSelectionChange">
					<el-table-column type="selection" width="55" :selectable="userSelectable"></el-table-column>
					<el-table-column prop="nickName" label="姓名" fit></el-table-column>
					<el-table-column prop="roleName" label="角色" fit fixed="right"></el-table-column>
				</el-table>
				<el-pagination background @size-change="userSizeChange" @current-change="userCurrentChange"
					:current-page="userCurrentPage" :page-sizes="[20, 50, 100]" :page-size="userPageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="userTotal">
				</el-pagination>
				<div style="margin-top: 20px;">
					<el-button @click="closeDialog">取消</el-button>
					<el-button type="primary" @click="addEmployeeDepartment" v-debounce>
						确定
					</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import departmentApi from "../../api/departmentManage.js";
	import userApi from "../../api/user.js"
	export default {
		data() {
			return {
				nickName: null,
				departmentId: null,
				department: {},
				loading: false,
				tableData: [],
				currentPage: 1,
				pageSize: 50,
				total: 0, //总条数
				nameDisabled: true,
				multipleSelection: [], //选择的人员
				addShow: false,
				// 添加人员
				userTableData: [],
				userLoading: false,
				userCurrentPage: 1,
				userPageSize: 50,
				userTotal: 0,
				userSelection: []
			}
		},
		created() {
			this.departmentId = localStorage.getItem("departmentId")
			this.getDepartment();
			this.getEmployeeDepartmentList();
		},
		methods: {
			back() {
				this.$router.push({
					path: "/departmentManage/departmentList"
				})
			},
			add() {
				this.addShow = true
				this.getUserList()
			},
			remove() {
				if (this.multipleSelection.length === 0) {
					return
				}
				this.$confirm('确定要将这些用户从部门中移除吗？', '移除', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let data = {
						idList: this.multipleSelection
					}
					console.log("提交数据==>", data)
					departmentApi.deleteEmployeeDepartmentList(data).then(res => {
						if (res.code === 200) {
							this.getEmployeeDepartmentList();
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消移除'
					});
				});
			},
			reset() {
				this.nickName = null
				this.currentPage = 1
				this.pageSize = 50
				this.multipleSelection = new Array()
				this.getEmployeeDepartmentList();
			},
			onSubmit() {
				this.currentPage = 1
				this.pageSize = 50
				this.getEmployeeDepartmentList()
			},
			// pageSize变化
			handleSizeChange(pageSize) {
				this.pageSize = pageSize
				this.getEmployeeDepartmentList()
			},
			// 页码变化
			handleCurrentChange(curPage) {
				this.currentPage = curPage
				this.getEmployeeDepartmentList()
			},
			getDepartment() {
				departmentApi.getDepartment({
					id: this.departmentId
				}).then(res => {
					if (res.code === 200) {
						this.department = res.data
					}
				})
			},
			getEmployeeDepartmentList() {
				this.loading = true
				let data = {
					nickName: this.nickName,
					departmentId: this.departmentId,
					currentPage: this.currentPage,
					pageSize: this.pageSize
				}
				departmentApi.getEmployeeDepartmentList(data).then(res => {
					if (res.code === 200) {
						//console.log("res.data==>",res.data)
						this.tableData = res.data.employeeDepartmentVoList
						this.total = res.data.total
						this.loading = false
					}
				})
			},
			handleSelectionChange(val) {
				this.multipleSelection = val.map(item =>{
					let id = item.id
					return id;
				})
				//console.log("multipleSelection==>", this.multipleSelection)
			},
			deleteGoods(item) {
				//console.log("item==>",item)
				if (item.employeeId === item.managerId) {
					this.$message.error("不能将主管移除！")
					return
				}
				this.$confirm('确定要将该用户从部门中移除吗？', '移除', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.multipleSelection = new Array()
					this.multipleSelection.push(item.id)
					let data = {
						idList: this.multipleSelection
					}
					departmentApi.deleteEmployeeDepartmentList(data).then(res => {
						if (res.code === 200) {
							this.getEmployeeDepartmentList();
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消移除'
					});
				});
			},
			// 设置主管列不可选
			selectable(row, index) {
				if (row.employeeId === row.managerId) {
					return false;
				}
				return true;
			},
			// 关闭弹窗
			closeDialog() {
				this.addShow = false;
			},
			// 选择人员
			userSelectionChange(val) {
				this.userSelection = val.map(item => {
					let id = item.id
					return id;
				})
				//console.log("选择的人=>",this.userSelection);
			},
			// 判断用户是否在该部门，在该部门则不可选
			userSelectable(row, index) {
				let isFlag = true;
				for (var i = 0; i < row.departmentIdList.length; i++) {
					if (row.departmentIdList[i] === this.departmentId) {
						isFlag = false;
						break;
					}
				}
				return isFlag;
			},
			// 条数变化
			userSizeChange(pageSize) {
				this.userPageSize = pageSize
				this.getUserList()
			},
			// 页码变化
			userCurrentChange(curPage) {
				this.userCurrentPage = curPage
				this.getUserList()
			},
			// 获取用户
			getUserList() {
				this.userLoading = true
				let data = {
					nickName: this.nickName,
					currentPage: this.userCurrentPage,
					pageSize: this.userPageSize
				}
				userApi.fuzzyQuery(data).then(res => {
					if (res.code === 200) {
						//console.log("数据===>",res.data)
						this.userTotal = res.data.total
						this.userTableData = res.data.userVoList
						this.userLoading = false
					}
				})
			},
			// 重置用户列表
			resetUser() {
				this.nickName = null;
				this.userCurrentPage = 1;
				this.userPageSize = 50;
				this.getUserList();
			},
			// 查询用户列表
			submitUser() {
				this.userCurrentPage = 1;
				this.userPageSize = 50;
				this.getUserList();
			},
			// 添加部门人员
			addEmployeeDepartment() {
				if (this.userSelection.length > 0) {
					let data = {
						departmentId: this.departmentId,
						idList: this.userSelection
					}
					console.log("提交的数据==>", data)
					departmentApi.addEmployeeDepartmentList(data).then(res => {
						if (res.code === 200) {
							this.closeDialog();
							this.getEmployeeDepartmentList();
						}
					})
				}
			}
		}
	}
</script>

<style>
	.department-head {
		margin-bottom: 20px;
	}

	.department-table {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
		margin-top: 10px;
	}
</style>